<template>
  <div>
    <document-head />
    <el-container style="height: 100vh">
      <el-aside width="16.5%">
        <el-button  @click="dialogTableVisible = true" class="el-icon-plus" size="mini" style="position: absolute;top:67px;left: 143px;font-size: 15px;z-index: 10 ">新建文档</el-button>
        <el-tabs v-model="activeName"  @tab-click="handleClick">
          <el-tab-pane  label="文档" name="first"><label slot="label">&emsp;文档&emsp;</label>
            <div  v-for="(item) in allFiles" :key="item.id">
              <el-link style="margin-left: 5%; font-size: 18px" :underline="false" @click="changeFile(item.id)">{{item.name}}</el-link>
              <el-button type="danger" class="el-icon-delete" size="mini" style="position: absolute;left: 190px;"></el-button>
              <el-divider></el-divider>
            </div>
          </el-tab-pane>
          <el-tab-pane label="目录" name="second">配置管理</el-tab-pane>


          <el-dialog title="新建文档" :visible.sync="dialogTableVisible" >
            <div class="size-icon1" >
              <div class="el-icon-document">
              </div>
            </div>
            <div style="font-size: 20px;font-family: 黑体;margin-left: 18%">新建产品文档</div>
            <div style="font-size: 14px;margin-left: 10%;margin-top: 5%">书写文档，轻松引用设计稿，高效审稿</div>
            <el-button style="font-size: 40px;margin-left: 20%;margin-top: 10%" class="el-icon-right" @click="createFile"></el-button>


            <div class="size-icon2" >
              <div class="el-icon-upload2">
              </div>
            </div>
            <div style="font-size: 20px;font-family: 黑体;position: absolute;right: 150px;top:280px;">上传文档</div>
            <div style="font-size: 14px;position: absolute;right: 75px;top:340px">支持doc,docx,pdf格式，在线审稿</div>
            <el-button style="font-size: 40px;position: absolute;right: 150px;top:435px" class="el-icon-right" @click="uploadFile"></el-button>

            <el-divider direction="vertical" class="el-divider2"></el-divider>
          </el-dialog>


        </el-tabs>
      </el-aside>
      <el-divider direction="vertical" class="el-divider1" ></el-divider>



      <el-main>
        <div>
          <el-input v-model="inputTitle" placeholder="请输入标题" style="width: 50%;margin-top: 2%;margin-left: 5%" maxlength="10" show-word-limit> </el-input>
          <el-button type="danger" style="margin-left: 26%" @click="saveFile">保存</el-button>
        </div>
        <div>
          <template>
            <div id="vditor" name="editor" style="margin-top: 3%;margin-left: 5%"></div>
          </template>

        </div>

      </el-main>



    </el-container>
  </div>

</template>

<script>
// @ is an alias to /src
import documentHead from '@/components/left/documentHead.vue'
import Vditor from "vditor";
import 'vditor/dist/index.css'
export default {
  name: 'articleEdit',
  components: {
    documentHead
  },
  data(){
    return{
      activeName: 'first',dialogTableVisible:false,
      fileId:-1,
      contentEditor: '',
      inputTitle:"",
      allFiles:[
        { id: 1, name : '123'},
        { id: 3, name : '456'}
      ]
    }
  },
  mounted(){
    this.contentEditor = new Vditor('vditor', {
      minHeight:600,
      width:1000 ,

      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: false,
      },
      after: () => {
        this.contentEditor.setValue('hello, Vditor + Vue!')
      },
    })
  },
  methods:{
    handleClick(key, keyPath) {
      console.log(key, keyPath);
    },
    changeFile(key){
      this.fileId=key;
    },
    createFile(){

    },
    uploadFile(){

    },
    saveFile(){
      console.log(this.contentEditor.getValue())
    }
  }
}
</script>
<style scoped>
.el-divider1{
  height: 100vh;
  margin-left: -0.1%;
}
.el-divider2{
  height: 40vh;
  margin-left: 20%;

  margin-top: -60%;
}
.el-button {
  border-right:0!important;
  border-left:0!important;
  border-top:0!important;
  border-bottom:0!important;
}
.size-icon1{
  font-size: 150px;
  margin-left: 16%;
}
.size-icon2{
  font-size: 150px;
  position: absolute;
  right: 110px;
  top:83px;
}
.el-main{
  background: #F8F8F8;
  margin-left: -0.5%;
}

</style>
